<style>
#survey-info {
	border-radius: 5px;
}

#survey-info li {
	height: 25px;
    width: 100%;
    color: #00557F;
    list-style: none;
}

#survey-info ul {
	padding: 0px 40px;
	font-size: 12px;
	font-family: 'Helvetica'; 
	margin: 5px 0px;
}

#survey-info li:nth-child(odd) { 
	background-color: #FFFFFF; 
}

#survey-info li:nth-child(even) { 
	background-color: #E1EEF4;
}

.answerValue {
	float: left;
	padding: 1px 0 1px 4px;
    width: 48%;
}

.answerValue input {
	margin: 0px;
}

.complaintName {
	height: 19px;
    margin-top: 2px;
	float: left;
    color: #00557F;
    padding: 2px 0px 2px 4px;
    width: 48%;
}

.editButton {
	float: right; 
	margin-right: 20px;
	background-color: #54BD06;
    border-radius: 8px 8px 8px 8px;
    color: white !important;
    font-size: 12px;
    padding: 3px 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.editButton:hover {
	opacity: 0.8;
}

.surveyAnswerBtn {
	height: 20px;
	width: 80px;
}

.surveyAnswerBtn span {
	height: 20px;
	margin: 0px;
	padding: 0px !important;
}

.syndromeTitleContainer {
	display: table;
	width: 100%;
}

.editButtonDiv {
	display: table;
    height: 25px;
    position: relative;
    width: 100%;
}
</style>

<script>

$(document).ready(function() {

	$(".radio").each(function() {
		$(this).buttonset();
	});
	
	$("li.complaint-item").each(function() {
		var val = $(this).find(".survey-answer-value").val();
		$radios = $(this).find(".radio-button");
		$radios.each(function() {
			var value = $(this).attr("value");
			if(value == val) {
				$(this).attr("checked", true);
				$(this).closest("div").find('label[for="' + $(this).attr('id') + '"]').addClass("ui-state-active");
			}
		});
	});
});

var updateComplaints = function () {
	var jsonObject = "";
	var surveyId = $("#hidden-survey-id").val();

	jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";
	jsonObject = jsonObject + "'surveyAnswers':[";

	$("li.complaint-item").each(function() {
		var surveyAnswerId = $(this).find(".survey-answer-id").val();
		var value = null;
		$radios = $(this).find(".radio-button");
		$radios.each(function(){
			if($(this).is(":checked")){
				value = $(this).attr("value");
			}
		});
		jsonObject = jsonObject + "{'id':" + surveyAnswerId;
		jsonObject = jsonObject + ",'value':" + value;
		jsonObject = jsonObject + "},";
	});
	
	jsonObject  = jsonObject.substring(0, jsonObject.length - 1);
	
	jsonObject = jsonObject + "]}";

	$.ajax({
		type : "POST",
		url : "/surveyView/updateComplaints",
		data : jsonObject,
		dataType : "json",
		contentType : "application/json",
		success : function(id) {
			noty({
				text: "&{'complaints.save.success'}",
				layout: "topRight",
				type: "success"
			});
		},
		error : function(e){
			noty({
				text: "&{'complaints.save.error'}",
				layout: "topRight",
				type: "error"
			});
		}
	});
}
</script>

<div id="survey-info">
	#{if contentMap != null && !contentMap.isEmpty()}
		#{list items:contentMap.keySet(), as:'complaintTypeName'}
			<div class="complaintTypeName">${complaintTypeName}</div>
			<ul>
				#{list items:contentMap.get(complaintTypeName), as:'surveyAnswer'}
					<li class="complaint-item">
						<div class="complaintName">${surveyAnswer.complaint.complaintName}</div>
						<div class="answerValue">
							<div class="radio">
						        <input class="radio-button" type="radio" id="radio_${surveyAnswer.complaint.complaintId}_0" name="${surveyAnswer.complaint.complaintId}" value="0"/>
						        <label for="radio_${surveyAnswer.complaint.complaintId}_0" class="surveyAnswerBtn">0</label>
						        <input class="radio-button" type="radio" id="radio_${surveyAnswer.complaint.complaintId}_1" name="${surveyAnswer.complaint.complaintId}" value="1"/>
						        <label for="radio_${surveyAnswer.complaint.complaintId}_1" class="surveyAnswerBtn">1</label>
						        <input class="radio-button" type="radio" id="radio_${surveyAnswer.complaint.complaintId}_2" name="${surveyAnswer.complaint.complaintId}" value="2"/>
						        <label for="radio_${surveyAnswer.complaint.complaintId}_2" class="surveyAnswerBtn">2</label>
						        <input class="radio-button" type="radio" id="radio_${surveyAnswer.complaint.complaintId}_3" name="${surveyAnswer.complaint.complaintId}" value="3"/>
						        <label for="radio_${surveyAnswer.complaint.complaintId}_3" class="surveyAnswerBtn">3</label>
			   				</div>
				    		<input class="survey-answer-value" type="text" value="${surveyAnswer.answerValue}" size="3" style="visibility: hidden;"/>
				    		<input class="survey-answer-id" type="text" value="${surveyAnswer.surveyAnswerId}" size="3" style="visibility: hidden;"/>
			    		</div>
					</li>
				#{/list}
			</ul>
		#{/list}
		<div class="editButtonDiv">
			<input type="submit" class="editButton" onclick="updateComplaints()" id="editButton" value="&{'save'}">
		</div>
	#{/if}
</div>